<template>
  <div>
    <el-dialog
      title="添加批次"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
      @close="close"
    >
      <div v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="批次名称：" prop="title">
            <el-input v-model.trim="form.title" placeholder="请输入批次名称" maxlength="20" />
          </el-form-item>
          <el-form-item label="码类型：" prop="codeType">
            <el-radio v-model="form.codeType" :label="0">普通链接二维码</el-radio>
          </el-form-item>
          <el-form-item label="功能：" prop="taskType">
            <el-radio-group v-model="form.taskType">
              <el-radio :label="1">点餐桌台</el-radio>
              <el-radio :label="2">军博娱乐</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="制作数量：" prop="num">
            <el-input v-model.trim="form.num" placeholder="请输入制作数量" maxlength="4" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="primary" :disabled="loading" @click="handleSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { validateStrLen, validateCustomPositiveInt } from '@/utils/validate'
import { createQrcodeTask } from '@/api/wxCode'
export default {
  data() {
    /**
       * 表单校验方法相关
       */
    const validateTitle = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入区域名称'))
      } else if (!validateStrLen(value, 40)) {
        callback(new Error('长度不超过20个汉字或40个字符'))
      } else {
        callback()
      }
    }
    // 数量
    const validateNum = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入制作数量'))
      } else if (!validateCustomPositiveInt(value, 3)) {
        callback(new Error('请输入1~999正整数'))
      } else {
        callback()
      }
    }
    return {
      /**
         * 表单校验字段相关
         */
      rules: {
        title: [
          {
            required: true,
            validator: validateTitle,
            trigger: ['blur', 'change']
          }
        ],
        codeType: [
          {
            required: true,
            message: '请选择码类型',
            trigger: ['blur', 'change']
          }
        ],
        taskType: [
          {
            required: true,
            message: '请选择功能',
            trigger: ['blur', 'change']
          }
        ],
        num: [
          {
            required: true,
            validator: validateNum,
            trigger: ['blur', 'change']
          }
        ]
      },
      resolve: null,
      reject: null,
      // 状态
      loading: false,
      dialogVisible: null,
      // 数据
      form: {
        title: '',
        codeType: 0,
        taskType: '',
        num: ''
      }
    }
  },
  methods: {
    open() {
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.loading = false
      this.$refs.form.resetFields()
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          createQrcodeTask(this.form)
            .then(res => {
              this.$notify({
                title: '成功',
                message: '添加批次成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.resolve()
              this.hide()
            }).finally(() => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
